<template>
    <div class="card">
        <div class="info">
            <el-avatar :src="logInfo.user.avatar" :size="70"></el-avatar>
            <div class="id">{{ logInfo.user.id }}</div>
            <div class="name">{{ logInfo.user.name }}</div>
        </div>
        <div class="devide"></div>
        <div class="detail">
            <div class="time">
                <span class="uploadTime">创建于：{{ transformDate(new Date(logInfo.uploadTime)) }}</span>
                <span class="editTime">最后修改于：{{ transformDate(new Date(logInfo.lastEditTime)) }}</span>
            </div>
            <div class="preText">
                {{ logInfo.preView ? logInfo.preView : "暂无预览信息" }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { LogPreview } from "@/api/log/type.ts";

import transformDate from "@/utils/tools/transformDate.ts";

// 接收参数
interface Props {
    logInfo: LogPreview;
}
defineProps<Props>();
</script>

<style lang="scss" scoped>
.card {
    width: 100%;
    height: 200px;
    background-color: white;
    border: 1px solid rgba(201, 181, 181, 0.5);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    .devide {
        width: 1px;
        height: 100%;
        background-color: rgba(201, 181, 181, 0.5);
        margin-left: 40px;
        margin-right: 40px;
    }

    .info {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        div {
            font-size: 14px;
            color: var(--el-color-primary);
        }
    }

    .detail {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 20px;
        font-family: "黑体";
        .time {
            display: flex;
            gap: 40px;
            font-size: 13px;
            color: gray;
        }
    }
}
</style>
